<!-- 富文本 -->
<template>
	<view class="rich-wrap">
		<view class="content_box"><u-parse :html="richText.content"></u-parse></view>
		<view class="tabbar-foot safe-area-inset-bottom">
			<view class="detail-foot_box safe-area-inset-bottom  u-flex u-col-ceter u-row-around">
				<!-- foot左侧 -->
				
				<!-- foot右侧 -->
				<view class="detail-right">
					<!-- 积分按钮 -->
					
					<view >
						<!-- 正常按钮 -->
						<view class="detail-btn-box u-flex u-row-around">
							<button class=" u-reset-button tool-btn add-btn" @tap="agree()">同意</button>
							<button class=" u-reset-button tool-btn pay-btn" @tap="refuse()">拒绝</button>
						</view>
						
					</view>
				</view>
			</view>
		</view>
		
	</view>
	
</template>

<script>
import Auth from '@/shopro/permission/index.js';
export default {
	components: {},
	data() {
		return {
			richText: ''
		};
	},
	computed: {},
	onLoad() {
		this.$Route.query.id && this.getRichText();
	},
	methods: {
		agree(){
			
			uni.showModal({
				title: '提示',
				content: '阅读并同意注册协议',
				success: function (res) {
					if (res.confirm) {
						console.log('用户点击确定');
						uni.redirectTo({
							url:'/pages/app/commission/apply'
						})
					} else if (res.cancel) {
						console.log('用户点击取消');
					}
				}
			});
			
		},
		refuse(){
			uni.switchTab({
				url:'/pages/index/user'
			})
		},
		getRichText() {
			this.$http('common.richText', {
				id: this.$Route.query.id
			}).then(res => {
				if (res.code === 1) {
					this.richText = res.data;
					uni.setNavigationBarTitle({
						title: res.data.title
					});
				}
			});
		}
	}
};
</script>

<style lang="scss">
.content_box {
	background: #fff;
	padding: 30rpx;
}

.tabbar-foot {
		min-height: 100rpx;
		width: 100%;
	}

	.detail-foot_box {
		min-height: calc(100rpx + env(safe-area-inset-bottom));
		border-top: 1rpx solid rgba(238, 238, 238, 1);
		background-color: #fff;
		width: 100%;
		position: fixed;
		bottom: 0;
		z-index: 999;

		.left,
		.detail-right {
			flex: 1;
		}

		.tools-item {
			flex: 1;
			height: 100%;

			.tool-img {
				width: 46rpx;
				height: 46rpx;
			}

			.tool-title {
				font-size: 22rpx;
				line-height: 22rpx;
				padding-top: 8rpx;
			}
		}

		.detail-btn-box {
			flex: 1;

			.tool-btn {
				font-size: 28rpx;
				font-weight: 500;
				color: rgba(#fff, 0.9);
				width: 210rpx;
				min-height: 70rpx;
				border-radius: 35rpx;
				padding: 0;
				margin-right: 20rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;

				.price {
					font-size: 24rpx;
					line-height: 24rpx;
					font-weight: bold;
					color: rgba(#fff, 0.9);
				}

				.price-title {
					font-size: 20rpx;
					line-height: 20rpx;
					font-weight: 500;
					color: rgba(#fff, 0.9);
					padding-top: 8rpx;
				}
			}

			.add-btn {
				box-shadow: 0px 2rpx 5rpx 0px rgba(102, 103, 104, 0.46);
				background: linear-gradient(90deg, rgba(103, 104, 105, 1), rgba(82, 82, 82, 1));
			}

			.pay-btn {
				box-shadow: 0px 7rpx 6rpx 0px rgba(229, 138, 0, 0.22);
				background: linear-gradient(90deg, rgba(233, 180, 97, 1), rgba(238, 204, 137, 1));
			}

			.score-btn {
				width: 600rpx;
				line-height: 80rpx;
				background: linear-gradient(90deg, rgba(49, 133, 243, 1), rgba(80, 205, 242, 1));
				box-shadow: 0px 7px 6px 0px rgba(80, 205, 242, 0.2);
				border-radius: 40rpx;
				font-size: 30rpx;

				font-weight: 500;
				color: rgba(255, 255, 255, 1);
				margin-right: 20rpx;
			}

			.seckill-btn {
				width: 432rpx;
				line-height: 70rpx;
				background: linear-gradient(93deg, rgba(208, 19, 37, 1), rgba(237, 60, 48, 1));
				box-shadow: 0px 7rpx 6rpx 0px rgba(#ed3c30, 0.22);
				font-size: 28rpx;

				font-weight: 500;
				color: rgba(255, 255, 255, 1);
				border-radius: 35rpx;
				padding: 0;
				margin-right: 20rpx;
			}

			.seckilled-btn {
				width: 432rpx;
				line-height: 70rpx;
				background: rgba(221, 221, 221, 1);
				font-size: 28rpx;

				font-weight: 500;
				color: #999999;
				border-radius: 35rpx;
				padding: 0;
				margin-right: 20rpx;
			}

			.groupon-btn {
				width: 210rpx;
				height: 70rpx;
				background: linear-gradient(90deg, rgba(254, 131, 42, 1), rgba(255, 102, 0, 1));
				box-shadow: 0px 7rpx 6rpx 0px rgba(255, 104, 4, 0.22);
				border-radius: 35rpx;
			}
		}
	}

</style>
